<template>
  <div>
    <hm-header>注册</hm-header>
    <hm-logo></hm-logo>
    <!-- 输入框 -->
    <hm-input
      ref="username"
      placeholder="用户名"
      v-model="username"
      :rule="/^1\d{4,10}$/"
      message="用户格式不对"
    ></hm-input>
    <hm-input
      ref="nickname"
      placeholder="昵称"
      v-model="nickname"
      :rule="/^[\u4e00-\u9fa5]{3,7}$/"
      message="用户的昵称必须是3-7位的中文"
    ></hm-input>
    <hm-input
      ref="password"
      placeholder="密码"
      v-model="password"
      :rule="/^\d{3,12}$/"
      message="用户密码格式错误"
    ></hm-input>

    <hm-button @click="register">注册</hm-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      nickname: '',
      password: ''
    }
  },
  methods: {
    register() {
      let status1 = this.$refs.username.validate(this.username)
      let status2 = this.$refs.nickname.validate(this.nickname)
      let status3 = this.$refs.password.validate(this.password)
      if (!status1 || !status2 || !status3) {
        return
      }
      // 1008601
      // 注册
      this.$axios
        .post('/register', {
          username: this.username,
          nickname: this.nickname,
          password: this.password
        })
        .then(res => {
          console.log('注册结果', res)
          if (res.data.statusCode === 200) {
            this.$toast.success('注册成功')
            this.$router.push({
              name: 'login',
              params: {
                username: this.username,
                password: this.password
              }
            })
          } else {
            this.$toast.fail('注册失败')
          }
        })
    }
  }
}
</script>

<style></style>
